<template>
  <div class="dashboard-container">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <div class="icon-container">
              <svg-icon icon-class="dashboard" />
            </div>
            <div class="stat-info">
              <div class="stat-title">今日产量</div>
              <count-to :start-val="0" :end-val="productionData.today" :duration="2000" class="stat-number" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <div class="icon-container" style="background-color: rgba(103, 194, 58, 0.1);">
              <svg-icon icon-class="chart" />
            </div>
            <div class="stat-info">
              <div class="stat-title">本月产量</div>
              <count-to :start-val="0" :end-val="productionData.month" :duration="2000" class="stat-number" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <div class="icon-container" style="background-color: rgba(230, 162, 60, 0.1);">
              <svg-icon icon-class="documentation" />
            </div>
            <div class="stat-info">
              <div class="stat-title">订单完成率</div>
              <count-to :start-val="0" :end-val="productionData.orderRate" :duration="2000" class="stat-number" suffix="%" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <div class="icon-container" style="background-color: rgba(245, 108, 108, 0.1);">
              <svg-icon icon-class="bug" />
            </div>
            <div class="stat-info">
              <div class="stat-title">设备运行率</div>
              <count-to :start-val="0" :end-val="productionData.deviceRate" :duration="2000" class="stat-number" suffix="%" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 图表区域 -->
    <el-row :gutter="20" class="mt20">
      <el-col :span="12">
        <el-card shadow="hover">
          <div slot="header">
            <span>生产趋势</span>
          </div>
          <div id="production-efficiency" class="chart"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div slot="header">
            <span>设备状态</span>
          </div>
          <div id="device-status" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="mt20">
      <el-col :span="12">
        <el-card shadow="hover">
          <div slot="header">
            <span>订单状态</span>
          </div>
          <div id="order-status" class="chart"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div slot="header">
            <span>质量分析</span>
          </div>
          <div id="quality-status" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  
  .stat-card {
    display: flex;
    align-items: center;
    
    .icon-container {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: rgba(64, 158, 255, 0.1); 
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      
      .svg-icon {
        font-size: 30px;
        color: #409EFF; 
      }
    }
    
    .stat-info {
      .stat-title {
        font-size: 14px;
        color: #909399;
      }
      
      .stat-number {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
      }
    }
  }
  
  .mt20 {
    margin-top: 20px;
  }
  
  .chart-container {
    height: 300px;
  }
}
</style>

<script>
import * as echarts from 'echarts';

export default {
  name: 'Dashboard',
  data() {
    return {
      productionData: {
        today: 256,
        month: 5280,
        orderRate: 85,
        deviceRate: 92
      }
    }
  },
  mounted() {
    // 确保DOM已经渲染完成后再初始化图表
    this.$nextTick(() => {
      this.initDeviceStatusChart();
      this.initOrderStatusChart();
      this.initQualityStatusChart();
      this.initProductionEfficiencyChart();
    });
    
    // 添加窗口大小变化时重新调整图表大小
    window.addEventListener('resize', this.resizeCharts);
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听
    window.removeEventListener('resize', this.resizeCharts);
  },
  methods: {
    resizeCharts() {
      const charts = ['device-status', 'order-status', 'quality-status', 'production-efficiency'];
      charts.forEach(id => {
        const chartDom = document.getElementById(id);
        if (chartDom) {
          const chart = echarts.getInstanceByDom(chartDom);
          chart && chart.resize();
        }
      });
    },
    initDeviceStatusChart() {
      const chart = echarts.init(document.getElementById('device-status'));
      const option = {
        title: { text: '设备状态概览', left: 'center' },
        tooltip: { trigger: 'item' },
        legend: { top: '10%', left: 'center' },
        series: [
          {
            name: '设备状态',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 20, name: '运行中' },
              { value: 5, name: '停机' },
              { value: 4, name: '维修中' },
            ],
          },
        ],
      };
      chart.setOption(option);
    },
    initOrderStatusChart() {
      const chart = echarts.init(document.getElementById('order-status'));
      const option = {
        title: { text: '订单状态概览', left: 'center' },
        tooltip: { trigger: 'item' },
        legend: { top: '10%', left: 'center'},
        series: [
          {
            name: '订单状态',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 40, name: '待生产' },
              { value: 20, name: '生产中' },
              { value: 30, name: '已完成' },
            ],
          },
        ],
      };
      chart.setOption(option);
    },
    initQualityStatusChart() {
      const chart = echarts.init(document.getElementById('quality-status'));
      const option = {
        title: { text: '质量状态概览', left: 'center' },
        tooltip: { trigger: 'item' },
        legend: { top: '10%', left: 'center' },
        series: [
          {
            name: '质量状态',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 40, name: '合格' },
              { value: 5, name: '不合格' },
            ],
          },
        ],
      };
      chart.setOption(option);
    },
    initProductionEfficiencyChart() {
      const chart = echarts.init(document.getElementById('production-efficiency'));
      const currentDate = new Date();
      const dates = [];
      const data = [];

      // 计算前7天的日期
      for (let i = 7; i > 0; i--) {
        const date = new Date();
        date.setDate(currentDate.getDate() - i);
        dates.push(this.formatDate(date));
        // 假设每个日期对应的生产效率数据，实际情况你可能需要从后端获取
        data.push(Math.floor(Math.random() * 100));
      }

      const option = {
        title: { text: '生产效率趋势', left: 'center' },
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: dates },
        yAxis: { type: 'value' },
        series: [
          {
            name: '生产效率',
            type: 'line',
            smooth: true,
            data: data,
            itemStyle: {
              color: '#409EFF'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(64, 158, 255, 0.5)' },
                  { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
                ]
              }
            }
          },
        ],
      };
      chart.setOption(option);
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
    },
  },
};
</script>

<style scoped>
.chart {
  width: 100%;
  height: 300px;
  margin-bottom: 20px;
  margin-top: 10px;
}
</style>
